import 'package:flutter/cupertino.dart';
import 'package:flutterappyidongjingfen/Extension/touch_callback.dart';
import 'package:flutterappyidongjingfen/Views/TabPageViews.dart';
import 'package:flutterappyidongjingfen/LineChart/chart_utils.dart';
import 'package:flutter/material.dart';

Widget listView2(BuildContext context){
  return Container(
    height: MediaQuery.of(context).size.height - 180,
    margin: EdgeInsets.only(left: 10,right: 10,top: 16),
    child: ListView(
      shrinkWrap: true,
      padding: EdgeInsets.only(top: 0),
      children: <Widget>[
        cardwith2("一般贷款",context),
        cardwith2("零售贷款",context),
        cardwith2("公司贷款",context),
        newRmb(context),
      ],
    ),
  );
}

Widget cardwith2(String title,BuildContext context){
  return Container(
    height: 420,
    child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        color: Color(0xFF23283C),
        child: Column(
          children: <Widget>[
            cardTitleRow2(title,context),
            RichText(
                textAlign: TextAlign.center,
                text: TextSpan(
                    children: [
                      TextSpan(
                        text: "亿",
                        style: TextStyle(fontSize: 15,color: Color(0xFF119CFD)),
                      )
                    ],
                    text: "53.00",
                    style: TextStyle(fontSize: 42.0,color: Color(0xFF119CFD),
                    )
                )
            ),
            CompareRow2(),
            /// 表格
            baseChart2(title,context),
            /// 小色块
            Padding(padding: EdgeInsets.only(bottom: 8),),
            bottomBlockWidget3(),
            Padding(padding: EdgeInsets.only(bottom: 5)),
            dividerLine(),
            Padding(padding: EdgeInsets.only(bottom: 12)),
            bottomQuestion(),
          ],
        )
    ),
  );
}

/// 新发放人民币
Widget cardwith3(String title,BuildContext context){
  return Container(
    height: 364,
    child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        color: Color(0xFF23283C),
        child: Column(
          children: <Widget>[
            cardTitleRow2(title,context),
            /// 表格
            Padding(padding: EdgeInsets.only(bottom: 20),),
            baseChart3(title,context),
            /// 小色块
            Padding(padding: EdgeInsets.only(bottom: 2),),
            bottomBlockWidget("实际",Color(0xFF119CFD),"收益率",Color(0xFFF3CE30)),
            Padding(padding: EdgeInsets.only(bottom: 8)),
            dividerLine(),
            Padding(padding: EdgeInsets.only(bottom: 12)),
            bottomQuestion(),
          ],
        )
    ),
  );
}


Widget newRmb(BuildContext context){
  return Stack(
    children: <Widget>[
      cardwith3("新发放人民币贷款",context),
    ],
  );
}

Widget cardTitleRow2(String title,BuildContext context){
  return Container(
    margin: EdgeInsets.fromLTRB(15, 10, 0, 10),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          width: 3,
          height: 16,
          child: Container(
//              color: Colors.blue,
            decoration: ShapeDecoration(
              color: Colors.blue,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1.5)),
            ),
          ),
        ),
        Padding(padding: EdgeInsets.only(left: 8)),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                title,
                style: TextStyle(fontSize: 16.0,color: Colors.white),
              ),
            ],
          ),
        ),
        TouchCallBack(
          child:  Container(
              alignment: AlignmentDirectional.topStart,
              margin: const EdgeInsets.only(right: 12.0,top: 5.0),
              child: Icon(Icons.chevron_right,color: Colors.white38)
          ),
          onPressed: (){
//              Navigator.pushNamed(context, 'dispositPage');
            print("${title}被点击");
          },
          background: Colors.black12,
        )

      ],
    ),
  );
}

Widget CompareRow2(){
  return Container(
    margin: EdgeInsets.only(top: 10,bottom: 10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Row(
          children: <Widget>[
            Row(
              children: <Widget>[
                Text("比上个月",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
                Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0,),
                Text("100亿",style: TextStyle(color: Color(0xFF119CFD),fontSize: 16.0),)
              ],
            )
          ],
        ),

        Row(
          children: <Widget>[
            Text("比年初",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
            Row(
              children: <Widget>[
                Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0,),
                Text("100亿",style: TextStyle(color: Color(0xFFFF3F77),fontSize: 16.0),)
              ],
            )
          ],
        ),
      ],
    ),
  );
}

/// 表格
Widget baseChart2(String title,BuildContext context){

  double width = MediaQuery.of(context).size.width - 120;
  return Container(
    margin: EdgeInsets.only(top: 5),
    alignment: Alignment.centerLeft,
    child: Stack(
      children: <Widget>[
        ChartLine(
//        backgroundColor: Colors.red,
          chartBeans: [
            ChartBean(x: '1月', y: 120,color: Colors.green),
            ChartBean(x: '', y: 60,color: Colors.green),
            ChartBean(x: '3月', y:50,color: Colors.red),
            ChartBean(x: '', y: 55,color: Colors.green),
            ChartBean(x: '', y: 90,color: Colors.green),
            ChartBean(x: '6月', y: 60),
            ChartBean(x: '', y: 30,color: Colors.green),
            ChartBean(x: '', y: 10,color: Colors.green),
            ChartBean(x: '9月', y: 100),
            ChartBean(x: '', y: 78,color: Colors.green),
            ChartBean(x: '', y: 90,color: Colors.green),
            ChartBean(x: '12月', y: 40),

          ],
          isShowHintX:true,
          hintXLineWidth: 0.5,
          hintXColor: Colors.white70,
          size: Size(MediaQuery.of(context).size.width - 50,
              180),
          isCurve: true,
          lineWidth: 2.5,
          lineColor: Colors.transparent,
          fontColor: Colors.transparent,
          xyColor: Colors.transparent,
          isShowBottomtHintX: true,
          xTextPadding: 5,
          numberOfhintX: 5,
          fontSize: 11,
          yNum: 4,
          isReverse: false,
          isCanTouch: false,
          isShowPressedHintLine: true,
          pressedPointRadius: 4,
          isShowXyRuler: false,
          pressedHintLineWidth: 0.5,
          pressedHintLineColor: Colors.transparent,
          duration: Duration(milliseconds: 2000),
//          backgroundColor: Colors.red,
        ),

        Container(
          width: width,
          height: 60,
//          color: Colors.white,
          margin: EdgeInsets.only(left: 50,right: 0,top: 90),
          child: Stack(
            children: <Widget>[
              Container(
//                color: Colors.red,
                margin: EdgeInsets.only(top: 14,left: 0),
                child: SizedBox(
                  width: 6,
                  height: 15,
                  child: Container(
                    decoration: ShapeDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Color(0xFFFF3F77),Color(0xFFFF3F77)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                      ),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: (width)/5 - 3,top: 30),
                child:  SizedBox(
                  width: 6,
                  height: 12,
                  child: Container(
                    decoration: ShapeDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Color(0xFF1AEFBA),Color(0xFF1AEFBA)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                      ),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: (width)/5 * 2 - 3,top: 9),
                child: SizedBox(
                  width: 6,
                  height: 20,
                  child: Container(
                    decoration: ShapeDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Color(0xFFFF3F77),Color(0xFFFF3F77)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                      ),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                    ),
                  ),
                ),
              ),
             Container(
               margin: EdgeInsets.only(left: (width)/5 * 3 - 3,top: 30),
               child:  SizedBox(
                 width: 6,
                 height: 18,
                 child: Container(
                   decoration: ShapeDecoration(
                     gradient: LinearGradient(
                       begin: Alignment.topCenter,
                       end: Alignment.bottomCenter,
                       colors: [Color(0xFF1AEFBA),Color(0xFF1AEFBA)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                     ),
                     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                   ),
                 ),
               ),
             ),
             Container(
               margin: EdgeInsets.only(left: (width)/5 * 4 - 3,top: 17),
               child:  SizedBox(
                 width: 6,
                 height: 12,
                 child: Container(
                   decoration: ShapeDecoration(
                     gradient: LinearGradient(
                       begin: Alignment.topCenter,
                       end: Alignment.bottomCenter,
                       colors: [Color(0xFFFF3F77),Color(0xFFFF3F77)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                     ),
                     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                   ),
                 ),
               ),
             ),
              Container(
                margin: EdgeInsets.only(left: (width)/5 * 5 - 6,top: 5),
                child: SizedBox(
                  width: 6,
                  height: 24,
                  child: Container(
                    decoration: ShapeDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Color(0xFFFF3F77),Color(0xFFFF3F77)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                      ),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                    ),
                  ),
                ),
              ),
            ],
          ),

        ),
        ChartLine(
//        backgroundColor: Colors.red,
          chartBeans: [
            ChartBean(x: '', y: 60,color: Colors.green),
            ChartBean(x: '1月', y: 120,color: Colors.green),
            ChartBean(x: '', y: 60,color: Colors.green),
            ChartBean(x: '2月', y:50,color: Colors.red),
            ChartBean(x: '', y: 55,color: Colors.green),
            ChartBean(x: '3月', y: 60),
            ChartBean(x: '', y: 30,color: Colors.green),
            ChartBean(x: '4月', y: 100),
            ChartBean(x: '', y: 78,color: Colors.green),
            ChartBean(x: '5月', y: 40),
            ChartBean(x: '', y: 78,color: Colors.green),
            ChartBean(x: '6月', y: 40),

          ],
          isShowHintX:true,
          hintXLineWidth: 0.001,
          hintXColor: Colors.transparent,
          size: Size(MediaQuery.of(context).size.width - 50,
              180),
          isCurve: true,
          lineWidth: 2.5,
          lineColor: Color(0xFF00C2FA),
          fontColor: Colors.white70,
          xyColor: Colors.transparent,
          isShowBottomtHintX: true,
          xTextPadding: 5,
          numberOfhintX: 5,
          fontSize: 11,
          yNum: 4,
          isReverse: false,
          isCanTouch: true,
          isShowPressedHintLine: true,
          pressedPointRadius: 4,
          isShowXyRuler: false,
          pressedHintLineWidth: 0.5,
          pressedHintLineColor: Colors.white,
          duration: Duration(milliseconds: 2000),
//          backgroundColor: Colors.red,
        ),
        Container(
//          color: Colors.red,
            margin: EdgeInsets.fromLTRB(14, 10, 0, 0),
            child: Text("亿",style: TextStyle(fontSize:11,color: Colors.white70 ),textAlign: TextAlign.left,)
        ),
        Container(
          margin: EdgeInsets.only(left: MediaQuery.of(context).size.width - 55,top: 10),
          child: Column(
            children: <Widget>[
              Text("亿",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Text("6",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 14.5)),
              Text("4",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 14.5)),
              Text("2",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 14.5)),
              Text("0",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 14.5)),
              Text("-2",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
            ],
          ),
        ),
      ],

    ),
  );
}


Widget baseChart3(String title,BuildContext context){
  return Container(
    margin: EdgeInsets.only(top: 5),
    alignment: Alignment.centerLeft,
    child: Stack(
      children: <Widget>[

        ChartLine(
//        backgroundColor: Colors.red,
          chartBeans: [
            ChartBean(x: '1月', y: 450,color: Colors.green),
            ChartBean(x: '', y: 1300,color: Colors.green),
            ChartBean(x: '3月', y:800,color: Colors.red),
            ChartBean(x: '', y: 900,color: Colors.green),
            ChartBean(x: '', y: 400,color: Colors.green),
            ChartBean(x: '6月', y: 200),
            ChartBean(x: '', y: 990,color: Colors.green),
            ChartBean(x: '', y: 700,color: Colors.green),
            ChartBean(x: '9月', y: 600),
            ChartBean(x: '', y: 1300,color: Colors.green),
            ChartBean(x: '', y: 2000,color: Colors.green),
            ChartBean(x: '12月', y: 700),

          ],
          isShowHintX:true,
          hintXLineWidth: 0.5,
          hintXColor: Colors.white70,
          size: Size(MediaQuery.of(context).size.width - 50,
              200),
          isCurve: true,
          lineWidth: 2.5,
          lineColor: Color(0xFFFAD961),
          fontColor: Colors.transparent,
          xyColor: Colors.transparent,
          isShowBottomtHintX: true,
          xTextPadding: 5,
          numberOfhintX: 5,
          fontSize: 11,
          yNum: 4,
          isReverse: false,
          isCanTouch: true,
          isShowPressedHintLine: true,
          pressedPointRadius: 4,
          isShowXyRuler: false,
          pressedHintLineWidth: 0.5,
          pressedHintLineColor: Colors.white,
          duration: Duration(milliseconds: 2000),
//          backgroundColor: Colors.red,
        ),
        Container(
          height: 150,
//          color: Colors.white,
          margin: EdgeInsets.only(top: 16,left: 28,right: 40),
          child: drawPost(),
        ),
        ChartLine(
//        backgroundColor: Colors.red,
          chartBeans: [
            ChartBean(x: '1月', y: 450,color: Colors.green),
            ChartBean(x: '', y: 1300,color: Colors.green),
            ChartBean(x: '3月', y:800,color: Colors.red),
            ChartBean(x: '', y: 900,color: Colors.green),
            ChartBean(x: '', y: 400,color: Colors.green),
            ChartBean(x: '6月', y: 200),
            ChartBean(x: '', y: 990,color: Colors.green),
            ChartBean(x: '', y: 700,color: Colors.green),
            ChartBean(x: '9月', y: 600),
            ChartBean(x: '', y: 1300,color: Colors.green),
            ChartBean(x: '', y: 2000,color: Colors.green),
            ChartBean(x: '12月', y: 700),

          ],
          isShowHintX:true,
          hintXLineWidth: 0.001,
          hintXColor: Colors.transparent,
          size: Size(MediaQuery.of(context).size.width - 50,
              200),
          isCurve: true,
          lineWidth: 2.5,
          lineColor: Color(0xFFFAD961),
          fontColor: Colors.white70,
          xyColor: Colors.transparent,
          isShowBottomtHintX: true,
          xTextPadding: 5,
          numberOfhintX: 5,
          fontSize: 11,
          yNum: 4,
          isReverse: false,
          isCanTouch: true,
          isShowPressedHintLine: true,
          pressedPointRadius: 4,
          isShowXyRuler: false,
          pressedHintLineWidth: 0.5,
          pressedHintLineColor: Colors.white,
          duration: Duration(milliseconds: 2000),
//          backgroundColor: Colors.red,
        ),
        Container(
//          color: Colors.red,
            margin: EdgeInsets.fromLTRB(14, 10, 0, 0),
            child: Text("亿",style: TextStyle(fontSize:11,color: Colors.white70 ),textAlign: TextAlign.left,)
        ),
        Container(
          margin: EdgeInsets.only(left: MediaQuery.of(context).size.width - 55,top: 10),
          child: Column(
            children: <Widget>[
              Text("%",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Text("80",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 20)),
              Text("60",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 20.5)),
              Text("40",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 20.5)),
              Text("20",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
              Padding(padding: EdgeInsets.only(bottom: 20.5)),
              Text("0",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
            ],
          ),
        ),
      ],

    ),
  );
}

//底部蓝色和黄色小块
Widget bottomBlockWidget3(){
  return Container(
    child: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            width: 12.5,
            height: 7.5,
            child: Container(
              decoration: ShapeDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Color(0xFF119CFD),Color(0xFF119CFD)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                ),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 3)),
          Text("余额",style: TextStyle(fontSize: 11.0,color: Colors.white70),),
          Padding(padding: EdgeInsets.only(left: 10)),
          SizedBox(
            width: 12.5,
            height: 7.5,
            child: Container(
              decoration: ShapeDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Color(0xFFFF3F77),Color(0xFFFF3F77)],
                ),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 3)),
          SizedBox(
            width: 12.5,
            height: 7.5,
            child: Container(
              decoration: ShapeDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Color(0xFF1AEFBA),Color(0xFF1AEFBA)],
                ),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 3)),
          Text("比上月",style: TextStyle(fontSize: 11.0,color: Colors.white70),)
          ///1AEFBA
        ],

      ),
    ),
  );
}


Widget drawPost(){
  return Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            postWith(40),
            postWith(90),
            postWith(75),
            postWith(80),
            postWith(39),
            postWith(20),
            postWith(40),
            postWith(20),
            postWith(30),
            postWith(50),
            postWith(90),
            postWith(60),
          ],
        ),
      ),
//      Padding(padding: EdgeInsets.only(bottom: 5)),
//      Text(title,style: TextStyle(fontSize: 11,color: Colors.white70))
    ],
  );
}

Widget postWith(double value){
  return  SizedBox(
    width: 6,
    height: value,
    child: Container(
      decoration: ShapeDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xFF00C6FB),Color(0xFF006CED)],
        ),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3)),
      ),
    ),
  );
}

